<!DOCTYPE html>
<html>
<head>
    <title>商品详情</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css"/>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/shopdetail.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            // 获取本地缓存
            var user = JSON.parse(sessionStorage.getItem("user"));
            // 获取我的积分
            var integral;
            $.get("/signins/" + user.id + "/state", function (data) {
                integral = data.integral;
                if (!integral) {
                    $("#integral").html(0);
                } else {
                    $("#integral").html(data.integral);
                }
            });
            //页面加载完成之后，从地址栏上拿到攻略文章的id
            var id = getParams().id;
            var goods;
            if (id) {
                $.get("/goods/" + id, function (data) {
                    goods = data;
                    //渲染数据
                    $(".detail").renderValues(data);
                })
            }
            //给立即兑换按钮绑定事件
            $(document).on('click', '#exchangeBtn', function () {
                $(document).dialog({
                    type: 'confirm',
                    closeBtnShow: true,
                    content: '本次兑换消耗' + goods.integral + '积分，你确定兑换吗',
                    onClickConfirmBtn: function () {
                        $.post("/orders", {
                            userId: user.id,
                            goodsId: goods.id,
                            totalIntegral: goods.integral,
                            state: 2
                        }, function (data) {
                            if (data.success) {
                                $(document).dialog({
                                    autoClose: 1500,
                                    content: '兑换成功, 本次消耗' + goods.integral + '积分',
                                    onClickConfirmBtn: function () {
                                        window.location.reload();
                                    }
                                });
                            } else {
                                if (integral) {
                                    $(document).dialog({
                                        autoClose: 2500,
                                        content: data.msg
                                    });
                                } else {
                                    $(document).dialog({
                                        autoClose: 2500,
                                        content: '抱歉,您的积分不足'
                                    });
                                }
                            }
                        });
                    }
                });
            });
            //给加入购物车按钮绑定事件
            $(document).on('click', '#addCart', function () {
                $.post("/orders", {
                    userId: user.id,
                    goodsId: goods.id,
                    totalIntegral: goods.integral,
                    state: 1
                }, function (data) {
                });
                $(document).dialog({
                    type: 'toast',
                    infoIcon: '/img/icon/success.png',
                    infoText: '加入成功',
                    autoClose: 1500
                });
            });

        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="goods.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>积分商城</span>
        </div>
        <div class="col">
            <span>我的积分:&nbsp;&nbsp;<b id="integral"></b></span>
        </div>
    </div>
</div>

<div class="container detail">
    <h5 class="title" align="center"><b>商品详情</b></h5>
    <div class="container commend">
        <a href="#">
            <img render-src="coverUrl">
            <p render-html="name" align="right"></p>
        </a>
    </div>
    <div class="focus">
        <p style="color: red; float: right"><b size="5">所需积分: <span render-html="integral"></span></b></p>
        <i class="fa fa-heart"><span> 0</span> 收藏</i>
        <i class="fa fa-thumbs-up"><span> 0</span> 点赞</i>
    </div>
</div>
<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab">
    <li class="nav-item ">
        <a class="nav-link active" id="pills-catalog-tab" data-toggle="pill" href="#pills-catalog">
            <span>商品介绍 </span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="pills-comment-tab" data-toggle="pill" href="#pills-comment">
            <span>评论</span>
        </a>
    </li>
</ul>
<div class="tab-content " id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-catalog">
        <div class="catalogs">
            <div>
                <div class="container introduce">
                    666
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade " id="pills-comment">

        <div class="container tag">
            <h6>骡友标签</h6>
            <div>
                <span>真香</span>
                <span>吃了七八吨</span>
                <span>很特别</span>
                <span>爱上这个糖</span>
                <span>刚刚</span>
            </div>
        </div>
        <hr>
        <div id="comment">
            <div>
                <div class="container row comment">
                    <div class="col-2 comment-head">
                        <a href="#">
                            <img class="rounded-circle"
                                 src="/upload/bunny.jpg">
                        </a>
                    </div>
                    <div class="col comment-right">
                        <p class="authorName"><span>逍遥</span></p>
                        <span class="comment-star"><i
                                class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                                class="fa fa-star"></i><i class="fa fa-star-o"></i></span>
                        <span class="comment-date">2018-07-19</span>
                        <div class="comment-content">
                            <a href="strategyComment.html">
                                <p>真香</p>
                            </a>
                        </div>

                        <ul class="comment-img">
                            <li>
                                <img src="/upload/d9dfbd10-3e32-44b3-a9e7-1a2b38c7dc8b.jpg">
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<div class="operation">
    <button class="btn" id="addCart">加入购物车</button>
    <button class="btn" id="exchangeBtn">立即兑换</button>
</div>
</body>
</html>